﻿<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>卅 地标图形设计</title>
    <!--  <meta name="viewport" content="width=device-width"> -->

    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="js/soundmanager2-nodebug-jsmin.js"></script>
    <script src="js/modernizr.custom.16411.js"></script>

</head>

<body id="allanimals" class="preloader preloader-layer-2">
<div id="fb-root"></div>
<div id="animalchanger" class="">
    <div class="border">
        <div class="frames">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="corners">
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="intro-sequence">
        <div class="loading hidden-startup">
            <h4>卅 <span>地标图形设计</span></h4>
            <p>30个特色地标 &ndash; 各由30个三角形组成.</p>
        </div>
        <div>
            <p><span>卅</span><span>，</span><span>数字</span><span>三十</span><span>的</span><span>中文代用字</span><span>。</span>
            </p>
            <p>
                <span>组成</span><span>的地标</span><span>图形</span><span>代</span><span>表</span><span>其</span><span>各自的</span><span>文化</span><span>...</span>
            </p>
            <p><span>小小的图形</span><span>组合起来</span><span>就是</span><span>美丽的图案，</span><span>还</span><span>有</span><span>一定的</span><span>视觉冲击力。</span>
            </p>
            <p><span>这是</span><span>图形文化，</span><span>地域地标文化，</span><span>也是</span><span>“卅”的文化。</span></p>
        </div>
        <div class="intro-content">
            <h1>卅&ndash;地标图形设计</h1>
            <p class="textured-type"> 30幅地标图形，来自于30个三角形，<span>代表着30个地域的文化</span></p>
            <p>这是一个<span>CSS</span>新型互动展示网站，相信你们会感觉到这个网站很有意思，并更希望与此网站有更多的互动</p>
            <a class="start-experience box-link red" href="#"><span>进入<i>图形</i>文化旅程</span></a></div>
        <div class="skip-intro">
            <div class="timeline"></div>
            <a class="line-link red" href="#">跳过开场动画</a></div>
    </div>
    <div class="level-one hidden-startup">
        <div class="level-two">
            <div class="animal-mover">
                <div class="wrap right-to-left">
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap peripheral">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap peripheral">
                        <div class="shard"></div>
                    </div>
                    <div class="shard-wrap peripheral">
                        <div class="shard"></div>
                    </div>
                    <div class="shadow inactive startup-inactive"></div>
                    <h1><span>地标图形设计</span></h1>
                </div>
            </div>
        </div>
        <!-- <ul class="animal-data">
                        <li class="textured-type">50<span>cm</span></li>
                        <li class="textured-type">67<span>kg</span></li>
                        <li class="textured-type">34</li>
                    </ul> -->
    </div>
    <div class="stage">
        <ul class="animal-nav">
            <li class="prev"><a class="nav-btn" href="#">
                <div class="arrow"></div>
                <div class="popout" popanimal="vaquita">地标名称</div>
            </a></li>
            <li class="throbbing"><a href="#" class="why-endangered "> <span><span>详细<br>
        信息</span></span> </a></li>
            <li class="next"><a class="nav-btn" href="#">
                <div class="arrow"></div>
                <div class="popout" popanimal="vaquita">地标名称</div>
            </a></li>
        </ul>


        <ul class="main-nav">
            <li><a class="nav-btn all-animals-btn" href="#">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="popout">全部地标</div>
            </a></li>
            <li><a class="nav-btn slideshow-on-btn" href="#">
                <div class="arrow">
                    <div></div>
                </div>
                <div class="arrow">
                    <div></div>
                </div>
                <div class="popout">自动播放</div>
            </a>
            </li>

            <li onclick="clickA()"><a class="nav-btn">
                <div class="mute"><span></span></div>
                <div class="popout">关闭声音</div>
            </a></li>
            <audio id="adduo" src="audio/test.mp3" loop="-1" autoplay>你的浏览器不支持</audio>
            <script>
                var a = document.getElementById("adduo");
                function clickA() {
                    if (a.paused) {
                        a.play()
                    } else {
                        a.pause();
                    }
                }

            </script>


            <a href="#" class="nav-btn all-animals-off-btn close">
                <div class="icon"></div>
                <div class="popout">返回 <span>地标名称</span></div>
            </a>
        </ul>
        <div class="animalinfo-wrapper">
            <ul class="animalinfo">
                <li class="textured-type smaller">图形<span>1</span></li>
                <li data-animal="vaquita">
                    <h2 class="textured-type">Vaquita</h2>
                </li>
                <li><a class="direct-stats stats-pie" href="#"><span></span></a> <a class="wallpaper" href="#">
                    <span></span> </a></li>
            </ul>
        </div>
        <footer>
            <ul>
                <!--<li><a class="line-link about" href="#">关于</a></li>-->
                <li><a class="how line-link" href="#">制作过程</a></li>
                <li><a class="line-link sources" href="#">参考文献</a></li>
                <li><a class="line-link share" href="#">分享</a></li>
                <li><a href="#" class="popout about"><span class="wee">联系网站</span>作者 <span
                        class="bryan">Yaavi</span></a></li>
            </ul>
            <a class="footer-nav" href="#">
                <div></div>
            </a></footer>
    </div>
    <div class="hover-detector inactive">
        <div data-animalClick="crow"></div>
        <div data-animalClick="vaquita"></div>
        <div data-animalClick="tamarin"></div>
        <div data-animalClick="frog"></div>
        <div data-animalClick="owl"></div>
        <div data-animalClick="turtle"></div>
        <div data-animalClick="oryx"></div>
        <div data-animalClick="iguana"></div>
        <div data-animalClick="seahorse"></div>
        <div data-animalClick="armadillo"></div>
        <div data-animalClick="sloth"></div>
        <div data-animalClick="kakapo"></div>
        <div data-animalClick="echidna"></div>
        <div data-animalClick="penguin"></div>
        <div data-animalClick="damselfly"></div>
        <div data-animalClick="bear"></div>
        <div data-animalClick="parrotfish"></div>
        <div data-animalClick="camel"></div>
        <div data-animalClick="butterfly"></div>
        <div data-animalClick="ostrich"></div>
        <div data-animalClick="panda"></div>
        <div data-animalClick="tapir"></div>
        <div data-animalClick="sifaka"></div>
        <div data-animalClick="lynx"></div>
        <div data-animalClick="rhino"></div>
        <div data-animalClick="peccary"></div>
        <div data-animalClick="okapi"></div>
        <div data-animalClick="loris"></div>
        <div data-animalClick="hirola"></div>
        <div data-animalClick="drill"></div>
    </div>
    <div class="animal-nav-content inactive" animal="">
        <div class="title-content">
            <h1>关于网站</h1>
            <h2> 30个地标 <span>30个三角形</span></h2>
            <h4>请选择其中一个点</h4>
            <p>进入我们的地标图形<br/>
                或者<a class="line-link red random-animal-btn" href="#">按照顺序浏览</a></p>
        </div>
        <ul>
            <li>
                <h4>地标图形 1</h4>
                <br/>
                <h2>埃菲尔铁塔</h2>
                <span><i>法国</i> 巴黎</span></li>
            <li>
                <h4>地标图形 2</h4>
                <br/>
                <h2>东方明珠</h2>
                <span><i>中国</i> 上海</span></li>
            <li>
                <h4>地标图形 3</h4>
                <br/>
                <h2>金字塔</h2>
                <span><i>埃及</i> 吉萨</span></li>
            <li>
                <h4>地标图形 4</h4>
                <br/>
                <h2>小美人鱼</h2>
                <span><i>丹麦</i> 哥本哈根</span></li>
            <li>
                <h4>地标图形 5</h4>
                <br/>
                <h2>风车</h2>
                <span><i>荷兰</i> 荷兰</span></li>
            <li>
                <h4>地标图形 6</h4>
                <br/>
                <h2>大阪城</h2>
                <span><i>日本</i> 大阪市</span></li>
            <li>
                <h4>地标图形 7</h4>
                <br/>
                <h2>狮头鱼身像</h2>
                <span><i>新加坡</i> 鱼尾狮公园</span></li>
            <li>
                <h4>地标图形 8</h4>
                <br/>
                <h2>悉尼哥剧院</h2>
                <span><i>澳大利亚</i> 悉尼</span></li>
            <li>
                <h4>地标图形 9</h4>
                <br/>
                <h2>帕特农神庙</h2>
                <span><i>希腊</i> 雅典</span></li>
            <li>
                <h4>地标图形 10</h4>
                <br/>
                <h2>仰光大金塔</h2>
                <span><i>缅甸</i> 仰光</span></li>
            <li>
                <h4>地标图形 11</h4>
                <br/>
                <h2>凯旋门</h2>
                <span><i>法国</i> 巴黎</span></li>
            <li>
                <h4>地标图形 12</h4>
                <br/>
                <h2>圆顶岩石清真寺</h2>
                <span><i>以色列 巴勒斯坦</i> 耶路撒冷</span></li>
            <li>
                <h4>地标图形 13</h4>
                <br/>
                <h2>天安门</h2>
                <span><i>中国</i> 北京</span></li>
            <li>
                <h4>地标图形 14</h4>
                <br/>
                <h2>比萨斜塔</h2>
                <span><i>意大利</i> 托斯卡纳省</span></li>
            <li>
                <h4>地标图形 15</h4>
                <br/>
                <h2>泰姬陵</h2>
                <span><i>印度</i> 阿格拉</span></li>
            <li>
                <h4>地标图形 16</h4>
                <br/>
                <h2>小于连撒尿雕像</h2>
                <span><i>比利时</i> 布鲁塞尔</span></li>
            <li>
                <h4>地标图形 17</h4>
                <br/>
                <h2>千里马铜像</h2>
                <span><i>朝鲜</i> 平壤</span></li>
            <li>
                <h4>地标图形 18</h4>
                <br/>
                <h2>南大门</h2>
                <span><i>韩国</i> 首尔</span></li>
            <li>
                <h4>地标图形 19</h4>
                <br/>
                <h2>富士山</h2>
                <span><i>日本</i> 本州</span></li>
            <li>
                <h4>地标图形 20</h4>
                <br/>
                <h2>独立纪念碑</h2>
                <span><i>柬埔寨</i> 金边</span></li>
            <li>
                <h4>地标图形 21</h4>
                <br/>
                <h2>白宫</h2>
                <span><i>美国</i> 华盛顿</span></li>
            <li>
                <h4>地标图形 22</h4>
                <br/>
                <h2>太空针塔</h2>
                <span><i>美国</i> 西雅图</span></li>
            <li>
                <h4>地标图形 23</h4>
                <br/>
                <h2>自由女神像</h2>
                <span><i>美国</i> 纽约</span></li>
            <li>
                <h4>地标图形 24</h4>
                <br/>
                <h2>华沙美人鱼</h2>
                <span><i>波兰</i> 华沙维斯瓦河西岸</span></li>
            <li>
                <h4>地标图形 25</h4>
                <br/>
                <h2>东方之门</h2>
                <span><i>中国</i> 苏州</span></li>
            <li>
                <h4>地标图形 26</h4>
                <br/>
                <h2>里亚尔托桥</h2>
                <span><i>意大利</i> 威尼斯</span></li>
            <li>
                <h4>地标图形 27</h4>
                <br/>
                <h2>圣瓦西里大教堂</h2>
                <span><i>俄罗斯</i> 莫斯科</span></li>
            <li>
                <h4>地标图形 28</h4>
                <br/>
                <h2>古罗马竞技场</h2>
                <span><i>意大利</i> 罗马</span></li>
            <li>
                <h4>地标图形 29</h4>
                <br/>
                <h2>大本钟</h2>
                <span><i>英国</i> 伦敦</span></li>
            <li>
                <h4>地标图形 30</h4>
                <br/>
                <h2>勃兰登堡门</h2>
                <span><i>德国</i> 柏林</span></li>
        </ul>
    </div>
    <div class="content-wrap">
        <div class="content">
            <div class="content-info">
                <div class="infos"><a href="#" class="nav-btn close">
                    <div class="icon"></div>
                </a>
                    <ul>
                        <li>名称：<span></span></li>
                        <li>|</li>
                        <li>位置：<span></span></li>
                    </ul>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>
                <ul class="ctas">
                    <li><a class="line-link red stats-pie statistics-on-btn" href="#"
                           class="statistics">图表信息<span></span></a></li>
                    <li><a href="#" class="videoturnon big-red popout">观看视频<span></span></a></li>
                    <li><a class="offsite line-link red" href="#" target="_blank">图形链接</a></li>
                </ul>
            </div>
            <div class="statistics">
                <ul class="stats-ui two">
                    <li><a class="nav-btn" href="#">
                        <div class="arrow"></div>
                        <div class="popout">返回介绍</div>
                    </a></li>
                    <li><a class="line-link red active" href="#"><span>信息</span>
                        <div class="arrow"></div>
                    </a></li>
                    <li><a class="line-link red" href="#"><span>设计师（创作者）</span>
                        <div class="arrow"></div>
                    </a></li>
                    <li><a class="line-link red" href="#"><span>建造时间</span>
                        <div class="arrow"></div>
                    </a></li>
                    <li>
                        <p>小提示：鼠标悬停在图表上，即可查看详细信息。</p>
                    </li>
                </ul>
                <div class="chart five-stats">
                    <div class="chart-shard-wrap">
                        <div class="shard"></div>
                    </div>
                    <div class="chart-bg">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="chart-info">
                        <p><span><em>2004</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>2005</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>2006</em><em class="top-stat number">10<i>%</i></em></span></p>
                        <p><span><em>2007</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>2008</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>2009</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>2010</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>2011</em><em class="number">10<i>%</i></em></span></p>
                        <p><span><em>VALUE HERE</em>Text goes here</span></p>
                    </div>
                </div>
            </div>
            <ul class="videos">
                <div class="close-video js-close-video"></div>
                <li>
                    <iframe id="video" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
                </li>
                <a href="#" class="nav-btn close js-close-video">
                    <div class="icon"></div>
                </a>
            </ul>
        </div>
    </div>
    <div class="overlay"><a href="#" class="nav-btn close">
        <div class="icon"></div>
    </a>
        <div class="about">
            <h2>联系作者</h2>
            <img src="img/assets/polygon-ewm.png" style="width: 60%">
            <p>姓名：Yaavi</p>

            <p>电话：原电话已失效<br>
                QQ：27679365<br>
                微信：请扫二维码
            </p>
            <p>
                百度“Yaavi”就可以找到我啦~
            </p>
        </div>
        <div class="how">
            <h2>制作过程</h2>
            <br>
            <p>自从听到CSS多边形,我一直有点惊讶的缺乏轰动的技术,所以我想创造一些不仅工作本身作为一个项目,但这也推动未充分利用的代码尽可能。</p>
            <p>
                shard-shifting功能在webkit浏览器只工作,这当然是一种限制,但同时,它几乎完全基于webkit的移动。Firefox支持clip-path属性,但作为一个SVG引用的形状,因此,编码运动在一个完全不同的方式工作。我想重点纯CSS的路线。</p>
            <p> 没听说过吗?在这里,以一条线:</p>
            <p> -webkit-clip-path:多边形(40% - 40%,50% - 60%,60% - 40%);</p>
            <p>
                所以,本质上,每个形状演变,移动和玩弄的一套新的坐标,和他们保持三角形,这意味着3点,用CSS转换连接动作。没有使用技巧或工具得到了结果,在代码级别上或图形。逐点,形状的形状,每一个手工制作的插图后通过亲自缔造跟踪JS函数。</p>
            <img src="img/assets/polygon-demo.png" alt="Polygon demonstration">
            <p>如果您对该技术或项目有任何问题，请联系 <a class="line-link  dark-line" target="_blank" href="javascript:;">Yaavi!</a></p>
        </div>
        <div class="sources">
            <h2>参考文献</h2>
            <p></p>
            <p>非常感谢有互联网这个平台，所以才能更好的去完善作品，网站的制作也参考了不少的文献内容。</p>
            <ul>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>优设</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>《中华文摘》</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>维基百科</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>百度百科</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>百度文库</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>百度图片</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>《从埃菲尔铁塔看结构艺术的表现》盛勇 陈艾荣</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>《宇宙科学与自然考古之谜（全记录）》弘</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>Adobe创意中国</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>《国外的旅游名景》刘晓丽 李敏</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>《世界遗产名录》联合国教科文组织</a></li>
                <li><a class="line-link dark-line offsite offsite-dark" href="javascript:;"><span></span>《建筑：形式·空间和秩序》弗朗西斯·D.K.钦</a></li>
            </ul>
            <p>再次感谢~</p>

        </div>
        <div class="download">
            <div id="map-tb"
                 style="width:1300px; height:800px; position: absolute; top:140px;left: 310px;  background:#333;"></div>
        </div>
        <div class="sharing-goodies">
            <h2>分享此网站</h2>
            <img src="img/assets/lj.png" style="width: 55%">
            <p>喜欢这个作品<br>
                扫描后就可以分享给他人啦~</p>
            <p>加油~</p>
        </div>
    </div>
    <!--<div class="browser-statement">
        <p>网站的动画特效全部基于webkit内核制作，想要极佳的体验，请下载<a href="#">Google Chrome</a>浏览器.</p>
        <a href="#" class="nav-btn close">
            <div class="icon"></div>
        </a>
    </div>-->
</div>
<div class="resize-hider">
    <h3>碎片</h3>
</div>
</body>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/vars.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/world.js"></script>
<script src="js/map-bd.js"></script>
</html>